<template>
  <div class="tShibor">
    <div class="inner-content">
      <div class="titleBox">
        <span class="title">今日Shibor</span>
        <span class="updateTime">更新于</span><span class="udT">{{date}}</span>
      </div>
    </div>
    <div class="tTable">
      <table>
        <thead>
          <tr>
            <td class="term">期限</td>
            <td class="shibor">Shibo(%)</td>
            <td class="BP">涨跌(BP)</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in todayShibor.data">
            <td class="term">{{item.dateLine}}<span>(O/N)</span></td>
            <td class="shibor">{{item.Shibor}}</td>
            <td class="BP">{{item.BP}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { Loop } from '@/common/polling'
export default {
  name: 'today-shibor',
  data () {
    return {
      updateTime: null,
      date: '',
      todayShibor: '',
      data: '',
      chartData: ''
    }
  },
  methods: {
    getPageData(type) {
      return remoteDAO.invoke(constant.InterfaceEnum.GET_SHIBOR_DATA, {type})
    },
    pageInit() {
      Promise.all([this.getPageData()])
        .then(res => {
          this.todayShibor = res[0]
        })
    }
  },
  mounted () {
    Loop.getInstance().register(this.pageInit);
  }
}
</script>

<style lang="less" scoped>
  @import '../../../assets/css/common.less';
  @import '../../../assets/css/cssReset';
.inner-content{
  width:96%;
  margin:0 auto;
}
.titleBox{
  text-align:left;
  line-height:0.46rem;
  overflow:hidden;
  height:0.46rem;
	.title{
	  margin:0 auto;
	  font-size:0.16rem;
	  line-height:0.16rem;
	  vertical-align:middle;
	  color:#222222;
	}
	.updateTime{
	  font-size:0.12rem;
	  font-family:PingFangSC;
	  text-align:left;
	  vertical-align:middle;
	  color:#999999;
	  line-height:0.16rem;
	}
	.udT{
	  font-family:Helvetica;
	  font-size:0.1rem;
	  color:#999999;
	  line-height:0.16rem;
	  vertical-align:middle;
	  text-align:left;
	}
}

.tShibor{
  height:4rem;
  width:100%;
  .tTable{
	  width:100%;
	  .tShibor .tTable table{
		  width:100%;
		  tr{
			  margin-left:0.15rem;
			  margin-right:0.15rem;
			  td{
				  border:none;
				}
			}
		}
		thead{
		  font-size:0.12rem;
		  color:#787878;
		  font-family:PingFang-SC;
		  background:#fafafa;
		  td{
			  height:0.3rem;
			}
			.BP{
				color:#787878;
			}
			.term{
				color:#787878;
			}
		}
		tbody{
		  font-size:0.16rem;
		  color:#555555;
		  font-family: Helvetica;
			td{
			  border-bottom:0.005rem solid #f0f0f0;
			  height:0.4rem;
			}
			tr:last-child{
				td{
					border:none;
				}
			}
		}
		.term{
		  width:1.4475rem;
		  text-align:left;
		  padding-left:0.15rem;
		  color:#222222;
  		font-size:0.14rem;
  		span{
			  color:#555555;
			  font-size:0.12rem;
			}
		}
		.shibor{
		  width:0.555rem;
		}
		.BP{
		  width:1.4475rem;
		  text-align:right;
		  padding-right:0.15rem;
		  color:#eb333b;
		}
	}
}
</style>
